<template>
    <div class="mall-layout">
        <homeTop></homeTop>
        <div class="mall-layout-main">
            <div class="cashier_desk">
                <div class="order_submit">
                    <img style="width: 20px;height: 20px;" src="https://static.xyb2b.com/images/c7acea2ab809c349e646061920f34d87.png" alt="">
                    <div style="width: 12px;"></div>
                    <div class="content">
                        <h3 class="title">订单提交成功</h3>
                        <p class="desc">订单提交成功，支付单号：OP1000280188466</p>
                        <p class="countdown">请您尽快完成支付，否则订单自动取消！支付剩余时间：
                            <span class="countdown">
                                <span class="hour">01</span>小时
                                <span class="hour">01</span>分
                                <span class="hour">01</span>秒
                            </span>
                        </p>
                    </div>
                </div>
                <div class="payment" style="display: block;">
                    <h3 class="title">支付方式</h3>
                    <div class="pay_method">
                        <div class="pay-channel-container">
                            <div class="pay-channel-item">
                                <div class="pay-channel select">
                                    <div class="ant-image" style="width: 30px;">
                                        <img src="https://static.xyb2b.com/images/b0d7678583bf8ffea157e1bbc232c9eb.png" alt="">
                                        
                                    </div>
                                    <span class="pay-channel-label">支付宝</span>
                                </div>
                                <div class="pay-desc"></div>
                            </div>
                            <div class="pay-channel-item">
                                <div class="pay-channel">
                                    <div class="ant-image" style="width: 30px;">
                                        <img src="	https://static.xyb2b.com/images/4c96a66d71d1dd357945391a30f2dbef.png" alt="">
                                        
                                    </div>
                                    <span class="pay-channel-label">微信支付</span>
                                </div>
                                <div class="pay-desc"></div>
                            </div>
                        </div>
                    </div>
                    <div class="footer_pay">
                        <div class="pay_total">实付
                            <span class="amount">
                                <span class="currency">¥</span>145.26
                            </span>
                        </div>
                        <el-button type="primary" size="small">立即付款</el-button>
                    </div>
                </div>
            </div>
        </div>
        <homefooter></homefooter>
    </div>
</template>

<script>
    import homeTop from '../assembly/top'
    import homefooter from '../assembly/footer'
    export default {
        components: {
            homeTop,
            homefooter
        },
        data() {
            return {

            }
        },
        watch: {

        },
        created() {},
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .mall-layout {
        position: relative;
        width: 100%;
    }
    
    .mall-layout-main {
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        padding-top: 24px;
        /* background-color: #fff !important; */
    }
    
    .cashier_desk {
        width: 1200px;
        margin: 0 auto;
        font-weight: 400;
        font-size: 14px;
        /* background-color: #fff; */
    }
    
    .order_submit {
        display: flex;
        margin-bottom: 20px;
        padding: 20px;
        color: #323233;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
    }
    
    .title {
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
    }
    
    .countdown {
        color: #969799;
    }
    
    p {
        margin-top: 0;
        margin-bottom: 1em;
    }
    
    .countdown {
        color: #969799;
    }
    
    .hour {
        color: #FF4444;
    }
    
    .payment {
        padding: 20px;
        border: 1px solid #EEEEEE;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    
    .pay_method {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #F6F7F8;
    }
    
    .pay-channel-container {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .pay-channel-item {
        margin-right: 20px;
    }
    
    .pay-channel {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 155px;
        height: 56px;
        color: #323233;
        font-size: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .select {
        border: 2px solid #656efe !important;
    }
    
    .ant-image {
        position: relative;
        display: inline-block;
    }
    
    .pay-channel-label {
        margin-left: 10px;
    }
    
    .pay-desc {
        height: 22px;
        margin-top: 8px;
        color: #999;
        font-size: 14px;
    }
    
    .footer_pay {
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .pay_total {
        color: #666666;
    }
    
    .amount {
        color: #FF4444;
        font-weight: 600;
        font-size: 16px;
    }
    
    .currency {
        font-size: 12px;
    }
</style>